<template>
	<el-form-item label="发货商品">
		<el-tabs v-model="active" v-if="type == 'send'">
			<el-tab-pane label="未发货" name="0"></el-tab-pane>
			<el-tab-pane label="已发货" name="1"></el-tab-pane>
		</el-tabs>

		<div class="list" key="checked" v-if="active == '0'">
			<el-tag type="danger" style="width: 100%; display: block;">{{ tagMessage }}</el-tag>
			<div class="item">
				<el-checkbox></el-checkbox>
				<el-image class="image"></el-image>
				<div class="message">vivo S12 12GB+256GB 屿蓝 一亿像素 4400万超清前置 KPL比赛用机测试认证 快充 智能 长续航 游戏 5G手机</div>
			</div>
		</div>
		<div class="list" key="sended" v-else-if="active == '1'">
			<div class="item">
				<div class="tab">包裹1</div>
				<el-image class="image"></el-image>
				<div class="message">vivo S12 12GB+256GB 屿蓝 一亿像素 4400万超清前置 KPL比赛用机测试认证 快充 智能 长续航 游戏 5G手机</div>
			</div>
		</div>
	</el-form-item>
</template>

<script>
export default {
	name: "ShippingGoods",
	props: {
		type: {
			type: String,
			default: "send", // send 发货 cancel 取消订单
		},
	},
	data() {
		return {
			active: "0",
		}
	},
	computed: {
		tagMessage() {
			return this.type == "send" ? "请选择要发货的商品" : "请选择需要取消发货的商品"
		},
	},
	methods: {},
	watch: {
		type() {
			this.active = "0"
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.list {
	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
		.image {
			width: 50px;
			height: 50px;
			margin-right: 10px;
			margin-left: 10px;
			border-radius: 5px;
		}
		.message {
			flex: 1;
			line-height: 1.8;
			font-size: 14px;
			color: #666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.tab {
			border-radius: 5px;
			background: #0cafcc;
			color: #fff;
			font-size: 12px;
			padding: 6px 6px;
			line-height: 1;
		}
	}
}
</style>
